<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>box-sizing</title>
        <style media="screen">

        .center{
            width: 500px;
            margin: 20px auto;
        }

        .normal{
            width: 500px;
            margin: 20px auto;
            padding: 50px;
            border: solid blue 10px;
        }
        .box {
            width: 500px;
            margin: 20px auto;
            padding: 50px;
            border: solid blue 10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        </style>
    </head>
    <body>
        <div class="normal">50px+10px 不算在width里 </div>
        <div class="box">box-sizing效果:50px+10px 已算在500px里</div>

        <div class="center">
            <p>
                box-sizing 方便不再计算盒子模型的大小。
                确保所有的元素都会用这种更直观的方式排版：
            </p>
            <code>
                * {
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                }
            </code>
        </div>

    </body>
</html>
